<!--suppress ALL -->
<template>
    <div class="page historyPoliceApply-page" data-page="changeShifts" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()>
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-search">
            <div class="historyPoliceApply_title" style="float: left">交接班</div>
            <div class="link-page-search-input" style="width: 58%">
                <i class="iconfont icon-APPicon_sousuo1"></i>
                <input type="text" placeholder="搜一搜" id="historysearch-contant">
            </div>
            <a class="link popover-open" data-popover="#dector_menu">
                <i class="iconfont icon-APPicon_shaixuan1
" id="active" style="font-size:24px"></i>
            </a>
        </div>

        <div class="select-option-fixed">
            <div class="history-type-select">
                <div class="history-col history-type-select-select" @click="selectCurrentType(0,1)">需要我交接的</div>
                <div class="history-col" @click="selectCurrentType(1,2)">交接给我的</div>
                <div class="history-col" @click="selectCurrentType(2,-1)">全部</div>
            </div>
        </div>
        <div data-infinite-distance="50" class="page-content infinite-scroll-content ptr-content pdbottom120"
            @infinite="loadMoreHistoryList" @ptr:refresh="refreshHistoryPolice">
            <div class="ptr-preloader" style="top: 20px;">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <div class="list media-list no-hairline-bottom  search-list searchbar-found"
                style="padding-top:60px;margin: 10px 20px;" id="historyPolice_list">
                <ul class="changeShiftsItems">

                </ul>
            </div>
            <div id="history_preloader" class="preloader infinite-scroll-preloader"></div>
        </div>
        <div class="popover select-option-con" id="dector_menu">
            <div class="popover-angle"></div>
            <div class="popover-inner">
                <div class="list">
                    <ul>
                        <li><a href="" class="list-button item-link popover-close" id="history_policeType">选择值班员</a>
                        </li>
                        <li><a href="" class="list-button item-link popover-close" id="history_isDeal">选择状态</a></li>
                        <li><a href="" class="list-button item-link popover-close" @click="openTime()"
                                id="history_date_start">选择日期</a></li>
                        <!-- <li><a href="" class="list-button item-link popover-close" @click="openTime('end')"
                                id="history_date_end">选择结束日期</a></li> -->

                        <li><a href="" class="list-button item-link popover-close removeScreen "
                                @click="removeScreen">清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fixedBtn">
            <div @click="createFun">
                <i class="iconfont icon-icon-test"></i>
                <span>创建</span>
            </div>
            <div @click=SuccessionFun>
                <i class="iconfont icon-saoyisao"></i>
                <span>接班</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .fixedBtn {
        position: fixed;
        left: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.2);
        width: 100%;
        display: flex;
        align-items: center;
        z-index: 2;
        height: 60px;
        text-align: center;
        font-size: 18px;
        color: #ffffff;
        background: rgba(36, 113, 202, 1);
    }

    .fixedBtn div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fixedBtn div:nth-child(1) {
        border-right: 1px solid #D8D8D8;
    }

    .fixedBtn i {
        font-size: 21px;
        margin-right: 10px;
    }

    .changeShiftsItems li {
        padding: 15px;
    }

    .onDuty {
        color: #2471CA;
        font-size: 16px;
        font-weight: 500;
    }

    .successFulDuty {
        color: #69BA71;
        font-size: 16px;
        font-weight: 500;
    }

    .noDuty {
        color: #E07762;
        font-size: 16px;
        font-weight: 500;
    }

    .item-flex-start {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        color: #999999;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .item-flex-end {
        margin-bottom: 10px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;

    }

    .flex-label {
        width: 60px;
        margin-right: 15px;
    }

    .flex-text {
        flex: 1;
        flex-wrap: wrap;
    }

    .addList1 {
        width: 84px;
        height: 30px;
        line-height: 30px;
        background: rgba(242, 242, 242, 1);
        border-radius: 15px;
        text-align: center;
        margin-right: 15px;
    }

    .nowSubmit {
        width: 84px;
        height: 30px;
        line-height: 30px;
        background: rgba(36, 113, 202, 1);
        border-radius: 15px;
        text-align: center;
        color: #ffffff;
    }

    .historyPoliceApply_title {
        padding-right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        background-color: #fff;
    }

    .select-option {
        padding: 10px 5px;
        background-color: #ffffff;
        font-size: 12px;
        width: 100%;
    }

    .history-type-select {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: white;
    }

    .history-type-select div {
        text-align: center;
        font-size: 14px;
    }

    .imgicon {
        width: 39px;
        height: 39px;
        border-radius: 5px;
        background: #eaeaea;
    }

    #historyPolice_list .decter-no-border,
    #historyPolice_list .decter-yes-border {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
    }

    .changeShiftsItems-item-title {
        font-size: 18px;
    }

    .item-title span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .click-contaier {
        z-index: 6;
        position: absolute;
        right: 16px;
        top: 18px;
    }

    .maintitle {
        width: 95%;
        padding-left: 5px;
        font-size: 14px;
    }

    .img_bqq {
        /*width: 45px;*/
        padding-top: 1.5px;
        height: 17px;
    }

    .linenumber {
        color: #333333;
        /*padding-top: 5px;*/
        font-size: 15px;
        padding-left: 0px;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        /*-webkit-box-orient: vertical;*/
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
    }

    .icon-size {
        font-size: 22px !important;
    }

  .domHide {
        display: none;
    }
</style>
<script>
    return {
        mounted() {
            var self = this;
            var app = self.$app;
            //页面传参
            self.fireTTypes = this.$route.params.fireTType;
            self.historyOrgId = this.$route.params.orgid;
            self.handlerStatus = this.$route.params.handlerStatus;
            QrStatus = false
        },
        data: function () {
            return {
                historyOrgId: 0,
                historyList: [],
                allowInfinite: true,
                fireSystemId: -1,//获取全部填-1
                fireBuildingStructureId: 0,//消防建筑物id（包含子集） 获取全部填0
                fcfCategoryId: -1,//设备类别-1;
                fireTTypes: -1,//-1全部 0:值班中 10:成功交班, 20:未完成交班,
                pageIndex: 0,
                pageSize: 25,
                startTimeStr: '',
                endTimeStr: '',
                selectContent: '',
                selectOptionOrg: "",
                selectOptionDec: "",
                type: 1,
                dutyAccount: '',
                pageName: 'changeShifts',
                time: ''
            }
        },

        methods: {
            //刷新二维码
            setQr: function () {
                let self = this;
              
                if (jQuery('#qrcode').length ==1) {
                    self.time&&clearInterval(self.time)
                self.time = setInterval(res => {
                    let timestamp;
                    timestamp = (new Date()).getTime();
                    jQuery('#qrcode').empty()
                    if (jQuery('#qrcode').length ==1) {
                        new QRCode(document.getElementById("qrcode"), {
                            text: self.visualCode + '?' + timestamp,
                            width: 174,
                            height: 174
                        });
                    }else{
                        clearInterval(self.time)
                    }
                }, 60000)
            }else{
                clearInterval(self.time)
            }

            },
            //创建
            createFun: function () {
                app.router.navigate(`/createList/0/false/${self.controlName}/${self.orgId}/${self.dutyAccount}/${self.shiftsEndTimeStr}/${self.shiftsStartTimeStr}/${self.createAccount}/${self.dutyUserName}/''/`);
            },
            //接班
            SuccessionFun: function () {
                native.scanQrCode();
            },
            scanningreciviceLocation: function () {

            },
            backToRefresh: function () {
                var self = this;
                self.reInit();
                self.getHistoryPoliceList();
                QrStatus = false
            },
            removeScreen: function () {
                var self = this;
                if (userInfor.isMuilUnitUser == 1) {//多
                    self.selectOptionOrg = "";
                    self.historyOrgId = userInfor.organizationIds;
                    self.orgIds = userInfor.organizationIds;
                    jQuery("#history_org").html("选择单位");
                    jQuery("#history_org").removeClass('select-active');
                }

                self.selectOptionIndex = "";
                self.startTimeStr = '';
                self.endTimeStr = '';
                jQuery("#history_date_start").html("选择日期");
                jQuery("#history_date_start").removeClass('select-active');
                $("#history_policeType").removeClass("select-active");
                jQuery("#history_policeType").html("选择值班员");
                self.status = -1;
                selectOptionIndex2 = "";
                $("#history_isDeal").removeClass("select-active");
                jQuery("#history_isDeal").html("选择状态");
                self.status = "";
                self.dutyAccount = ''
                selectOptionIndex1 = "";
                self.reInit();
                self.clearContent();
                self.getHistoryPoliceList();
            },
            loadMoreHistoryList: function () {
                var self = this;
                if (!self.allowInfinite) return;
                self.allowInfinite = false;
                setTimeout(function () {
                    self.pageIndex++;
                    self.getHistoryPoliceList();
                }, 1000);
            },
            refreshHistoryPolice: function (e, done) {
                if (done && e) {
                    var self = this;
                    var $ = self.$$;
                    setTimeout(function () {
                        self.reInit();
                        $('#history_preloader').hide();
                        self.getHistoryPoliceList();
                        done();
                    }, 1000);
                }
            },
            reInit: function () {
                var self = this;
                self.pageIndex = 0;
                $(".page-content").scrollTop(0, 300);
                $("#historyPolice_list ul").empty();
                if (!self.allowInfinite) {
                    self.allowInfinite = true;
                    $('#history_preloader').show();
                }
            },
            //tab选项卡点击事件
            selectCurrentType: function (num, type) { //0 -1
                indexHistoryPoliceApply = num;
                var self = this;
                self.pageIndex = 0;
                if (getClickEnabel()) {
                    var self = this;
                    var $ = self.$$;
                    $(".history-type-select div").removeClass('history-type-select-select').eq(num).addClass('history-type-select-select');
                    self.type = type
                    $(".page-content").scrollTop(0, 300);
                    $("#historyPolice_list ul").empty();
                    // self.reInit();
                    self.getHistoryPoliceList();
                }
            },
            //时间筛选
            openTime: function () {
                var self = this;
                let date = common.getTimeArray(1);
                loadSelectedDate_Fn(5, function (data) {
                    self.startTimeStr = data.singleDate + ' ' + '00:00:00'
                    self.endTimeStr = data.singleDate + ' ' + '23:59:59'
                    $("#history_date_start").html(data.singleDate);
                    jQuery("#history_date_start").addClass('select-active');
                    if (jQuery("#history_policeType")[0].innerText != "选择值班员" || jQuery("#history_isDeal")[0].innerText != "选择状态" || jQuery("#history_date_start")[0].innerText != "选择日期") {
                        jQuery("#active").addClass("select-active");
                        self.reInit();
                        self.clearContent();
                        self.getHistoryPoliceList();
                    } else {
                        jQuery("#active").removeClass("select-active");
                    }
                });
            },
            //pushCOde
            pushCode: function (id, type, event) {
                let self = this;
                id=self.QRid
                window.QRid=id
                clearInterval(self.time)
              
                //start
                let htmlContent = ''
                if (changeShiftsType == 1&&changeShiftsId&&changeShiftsId==id&&jQuery('#qrcode').length>0) {
                    htmlContent += `<i class="iconfont icon-kulian-line" style="font-size: 100px;color: #E07762;"></i>
                                <p>交班被拒绝，请修正</p>`
                    shiftStatus = false
                }
                else if (changeShiftsType == 0&&changeShiftsId&&changeShiftsId==id&&jQuery('#qrcode').length>0) {
                    htmlContent += `<i class="iconfont icon-duigou2" style="font-size: 100px;color: #69BA71;"></i>
                                <p>感谢您的辛勤工作</p>`
                    shiftStatus = false
                } else {
                    jQuery('#qrcode').empty()
                    htmlContent += `<div id="qrcode" style="width:174px;height:174px;margin:0 auto" @click="refreshTimeStamp"></div>
                        <p style="text-align:center;margin-top:20px;">请向工作人员出示二维码</p> `
                    changeShiftsType = -1
                }
                jQuery('#QrBox').remove()
                let html5 = `
                <div class="popup dector-popup" id="QrBox"style="height:50%!important;top:20%!important;width: 90%;left: 5%;border-bottom-left-radius: 15px;
                    border-bottom-right-radius: 15px;">
                    <div class="rdsp-dector-popup">
                        <div class="rdsp-dector-popup-bottom">
                            <span class="bind-all-unit" style="font-size:18px; text-align:center;display:block">现场交接班</span>
                            <div class="rdsp-dector-list rdsp-dector-list-height list">
                                <div class="sort_box" id="dector_sort_list" style="text-align:center">
                                    `+ htmlContent + `
                                </div>
                                
                                <div id="letter"></div>
                            </div>
                        </div>
                </div>
                <div id="closepupop" style="color:#2471CA;text-align: center;border-bottom: 1px solid #2471CA;position: absolute;z-index: 10600;top: 103%;left: 44%;">关闭</div> 
                </div>`;
                creatNewPopup(html5, function () {
                    let timestamp;
                    timestamp = (new Date()).getTime();
                    if (changeShiftsType == -1) {
                        Dao.getShiftsRecordVisualCode({ shiftsRecordId: id }, function (data) {
                            if (jQuery('#qrcode').length > 0) {
                                self.visualCode = data.visualCode
                                new QRCode(document.getElementById("qrcode"), {
                                    text: self.visualCode + '?' + timestamp,
                                    width: 174,
                                    height: 174
                                });
                                self.setQr()
                                changeShiftsType = -1
                            }
                        })
                    }
                    jQuery('#qrcode').click(function () {
                        clearInterval(self.time)
                        jQuery('#qrcode').empty()
                        let timestamp;
                    timestamp = (new Date()).getTime();
                        new QRCode(document.getElementById("qrcode"), {
                                    text: self.visualCode + '?' + timestamp,
                                    width: 174,
                                    height: 174
                                });
                                self.setQr()
                    })
                    jQuery('#closepupop').click(function () {
                        app.popup.close();
                        clearInterval(self.time)
                    })

                })
                //end

            },
            getHistoryPoliceList: function () {
                var self = this;
                var $ = self.$$;
                //筛选按钮有值变色
                if (jQuery("#history_policeType")[0].innerText != "选择值班员" || jQuery("#history_isDeal")[0].innerText != "选择状态" || jQuery("#history_date_start")[0].innerText != "选择日期") {
                    jQuery("#active").addClass("select-active");

                } else {
                    jQuery("#active").removeClass("select-active");
                }
                //警情设备列表
                Dao.selectShiftsRecordList({
                    orgIds: self.historyOrgId,//当前用户所拥有的业主单位编码权限,
                    dutyAccount: self.dutyAccount,
                    queryType: 1,
                    status: self.status,
                    pageIndex: self.pageIndex,
                    pageSize: self.pageSize,
                    startTimeStr: self.startTimeStr,
                    endTimeStr: self.endTimeStr,//
                    type: self.type == -1 ? "" : self.type,
                    queryContent: self.selectContent,//搜索关键词
                }, function (data, total) {
                    if (self.pageIndex == 0) {
                        $("#historyPolice_list ul").empty();
                    }
                    if (data && data.length > 0) {
                        
                        if (self.pageSize * self.pageIndex + data.length < total) { //没分页
                            $("#history_preloader").hide();
                            self.allowInfinite = true;
                         

                        } else {  //有分页
                            $("#history_preloader").show();
                            self.allowInfinite = false;
                            if ( self.pageSize > data.length ){
                            $("#history_preloader").hide();
                        } 
                        }
                        for (var i = 0; i < data.length; i++) {
                            var dealResultHtml = "";

                            if (data[i].status == 0) {
                                dealResultHtml += `值班中`;
                            } else if (data[i].status == 1) {
                                dealResultHtml += `成功交班`;
                            } else if (data[i].status == 2) {
                                dealResultHtml += `未完成交班`;
                            } else {

                            }
                            let item = data[i]
                            $("#historyPolice_list ul").append(`
                            <li class="shifts-item" data-id="${item.id}" data-createAccount="${item.createAccount}">
                                <div class="${item.status == 0 ? 'onDuty' : (item.status == 1 ? 'successFulDuty' : 'noDuty')}">${dealResultHtml}</div>
                                <h3 class="changeShiftsItems-item-title">${item.shiftsName}</h3>
                                <div class="item-flex-start"><span class="flex-label">所属单位</span><span
                                        class="flex-text">${item.orgName}</span></div>
                                        <div class="item-flex-start"><span class="flex-label">值班员</span><span
                                            class="flex-text">${item.dutyUserName}</span></div>
                                <div class="item-flex-start"><span class="flex-label">值班时间</span><span class="flex-text">${item.shiftsStartTime.substring(0, 4)}年${item.shiftsStartTime.substring(5, 7)}月${item.shiftsStartTime.substring(8, 10)}日${item.shiftsStartTime.substring(11, 16)}至${item.shiftsEndTime.substring(0, 4)}年${item.shiftsEndTime.substring(5, 7)}月${item.shiftsEndTime.substring(8, 10)}日${item.shiftsEndTime.substring(11, 16)}</span></div>
                                <div class="item-flex-end ${item.status != 0 || item.dutyAccount.split(',').indexOf(userInfor.accountName) == -1 ? 'domHide' : ''}">
                                    <div class="addList1" >添加记录</div>
                                    <div class="nowSubmit" data-id="${item.id}" data-createAccount="${item.createAccount}">现场交班</div>
                                </div>
                            </li>
                          `);
                        }
                        jQuery('.nowSubmit').off().click(function (event) {
                            event.stopPropagation();
                            let id = jQuery(this).attr('data-id')
                            let type = jQuery(this).attr('data-type')
                            changeShiftsType = -1
                            // self.setQr()
                            self.QRid=id
                            self.pushCode( self.QRid, type, event)
                        })
                        //})
                        jQuery('.shifts-item').each(function (index) {
                            let id = jQuery(this).attr('data-id')
                            let createAccount = jQuery(this).attr('data-createAccount')
                            jQuery(this).click(function () {
                                app.router.navigate(`/changeShiftsDetails/${id}/${createAccount}`)
                            })
                        })

                    } else {
                        self.allowInfinite = false;
                        $("#history_preloader").hide();
                        if (self.pageIndex == 0) {//暂无数据
                            $("#historyPolice_list ul").empty();
                            $("#historyPolice_list ul").append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
                        }
                    }
                });
            },

            initPagePiker: function (datalist) {
                var self = this;
                var $ = self.$$;
                //消防系统
                app.methods.initNewSinglePiker("historySys", function (data, system_id) {
                    $("#historySys-name").html(data);
                    self.fireSystemId = system_id;
                    self.reInit();
                    self.getHistoryPoliceList();
                }, datalist);
            },

            clearsearch: function (type, typeName) {
                jQuery("#historyPolice_list ul").empty();
                var self = this;
                self.selectContent = '';
                self.pageIndex = 0;
                self.getHistoryPoliceList();
            },
            clearContent: function () {
                if (userInfor.isMuilUnitUser == 0) {
                    if (this.fireSystemId != -1 || this.startTimeStr != '' || this.fcfCategoryId != -1 || this.status != -1) {
                        $("#dec-search").addClass('search-select');
                    } else {
                        $("#dec-search").removeClass('search-select');
                    }
                } else {
                    if (this.historyOrgId != userInfor.organizationIds || this.fcfCategoryId != -1 || this.fireSystemId != -1 || this.startTime != '' || this.status != -1 || this.status != "") {
                        $("#dec-search").addClass('search-select');
                    } else {
                        $("#dec-search").removeClass('search-select');
                    }
                }
            },
        },

        on: {
            pageInit: function (e, page) {
                var self = this;
                var app = self.$app;
                var $ = self.$$;
                self.historyOrgId = userInfor.organizationIds;
                //值班人员点击
                let selectOptionIndex2 = null, selectOptionType
                jQuery("#history_policeType").click(function (e) {
                    if (self.dutyAccount == '') {
                        selectOptionIndex2 = "";
                    }
                    getFourTypeUser(self.historyOrgId, function (data) {
                        if (self.dutyAccount == data.id) {
                            $("#history_policeType").removeClass("select-active");
                            jQuery("#history_policeType").html("选择值班员");
                            self.dutyAccount = '';
                        } else {
                            jQuery("#history_policeType").html(data.name);
                            $("#history_policeType").addClass("select-active");
                            self.dutyAccount = data.id;
                        }
                        if (selectOptionIndex2 != data.index) {
                            selectOptionIndex2 = data.index;
                            selectOptionType = data.type;
                        } else {
                            selectOptionIndex2 = "";
                            selectOptionType = 1;
                        }
                        self.reInit();
                        self.clearContent();
                        self.getHistoryPoliceList();
                    }, selectOptionIndex2, selectOptionType);
                });

                //选择状态
                var dealType = [];
                var dealResult = [];
                dealResult.push({ "id": 0, "text": "值班中" });
                dealResult.push({ "id": 1, "text": "成功交班" });
                dealResult.push({ "id": 2, "text": "未完成交班" });
                for (var i = 0; i < dealResult.length > 0; i++) {
                    var obj = {};
                    obj.id = dealResult[i].id;
                    obj.name = dealResult[i].text;
                    dealType.push(obj);
                }
                let selectOptionIndex1 = null;
                jQuery("#history_isDeal").click(function (e) {
                    if (self.status == "") {
                        selectOptionIndex1 = "";
                    }
                    selectOptionFn(dealType, function (data) {
                        if (self.status == data.id) {
                            $("#history_isDeal").removeClass("select-active");
                            jQuery("#history_isDeal").html("选择状态");
                            self.status = "";
                        } else {
                            jQuery("#history_isDeal").html(data.name);
                            $("#history_isDeal").addClass("select-active");
                            self.status = data.id;
                        }
                        if (selectOptionIndex1 != data.index) {
                            selectOptionIndex1 = data.index;
                        } else {
                            selectOptionIndex1 = "";
                        }
                        self.reInit();
                        self.clearContent();
                        self.getHistoryPoliceList();
                    }, selectOptionIndex1);
                });
                //搜索
                jQuery("#historysearch-contant").keypress(function (e) {
                    let name = jQuery("#historysearch-contant").val();
                    if (e.which == 13) {
                        self.selectContent = name;
                        $("#historyPolice_list ul").empty();
                        self.pageIndex = 0;
                        self.getHistoryPoliceList();
                    };
                });

                //重现筛选条件
                if (localStorage.getItem("ilink_select_option")) {
                    var selectHistory = JSON.parse(localStorage.getItem("ilink_select_option"));
                    if (selectHistory.page == "historyPoliceApply") {
                        self.historyOrgId = selectHistory.organizationIds;
                        jQuery("#history_org").html(selectHistory.orgName).addClass('select-active');
                    }
                }
                self.getHistoryPoliceList();
            },
            pageBeforeOut: function (e, page) {
                var self = this;
                clearInterval(self.time)
                if (self.historyOrgId != userInfor.organizationIds) {
                    let params = {
                        page: 'historyPoliceApply',
                        organizationIds: self.historyOrgId,
                        orgName: jQuery("#history_org").html(),
                    }
                    saveSelectOption(params);
                }
            }

        }
    }
</script>